<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="计划模板" top="8vh" :visible.sync="dialogVisible" @close="resetForm()" width="1200px">
        <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="table_top flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    模板列表
                    <span>如要更换计划模板，请前往「投放管理-任务列表」进行更改</span>
                </div>
                <el-link type="primary" :underline="false" @click="toTask">创建模板</el-link>
            </div>

            <div class="table_head flexbox flexcenter">
                <div class="width1 flex th">计划信息</div>
                <div class="width2 th">营销目标</div>
                <div class="width3 th">推广方式</div>
                <div class="width4 th">抖音号</div>
                <div class="width5 th">商品信息</div>
                <div class="width6 th">广告账户</div>
                <div class="width7 th">操作</div>
            </div>
            <div class="table_content" v-if="modelList.length>0">
                <div class="table_item flexbox flexcenter" :class="{'active':item.id==id}" v-for="(item,index) in modelList" :key="index" @click="selectModel(item)">
                    <img src="../../assets/img/market_checked.svg" alt="" class="active_img">
                    <div class="width1 flex td">
                        <div class="two_text two_line font_14 color_01">{{item.name}}</div>
                    </div>
                    <div class="width2 td">{{item.target=="VIDEO_PROM_GOODS"?"短视频":"直播"}}</div>
                    <div class="width3 td">{{item.promotion_way=="STANDARD"?"专业版":"极速版"}}</div>
                    <div class="width4 td">
                        <div class="flexbox flexcenter">
                            <img :src="item.aweme_img" alt="" class="dy_head">
                            <div class="flex ml_12">
                                <div class="one_text one_line font_14 color_01">{{item.aweme_name}}</div>
                                <div class="one_text one_line font_14 color_03 mt_2">抖音号：{{item.aweme_id}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="width5 td">
                        <div class="flexbox flexcenter">
                            <img :src="item.product_img" alt="" class="sp_head">
                            <div class="flex ml_12">
                                <div class="one_text one_line font_14 color_01">{{item.product_name}}</div>
                                <div class="one_text one_line font_14 color_03 mt_2">商品 ID：{{item.product_id}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="width6 td">
                        <div class="two_text two_line font_14 color_01">{{item.advertiser_name}}</div>
                        <div class="one_text one_line font_14 color_03 mt_2">ID：{{item.advertiser_id}}</div>
                    </div>
                    <div class="width7 td">
                        <el-link type="danger" :underline="false" @click.stop="delModel(item)">删除</el-link>
                    </div>
                </div>
            </div>
            <div class="flexbox flexcenter flexcolumn flexjust" style="height:450px" v-else>
                <img src="../../assets/img/null_icon.svg" alt="">
                <div class="font_13 color_03">暂无数据</div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm()" class="el-button-width">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: [],
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            queryInfo: {
                id: null,
                page: 1,
                limit: 99,
            },
            id: null,
            modelList: [],
        };
    },
    created() {},
    methods: {
        getData(id) {
            this.dialogVisible = true;
            this.queryInfo.id = id;
            this.getDataList();
        },
        selectModel(item) {
            this.id = item.id;
        },
        //获取广告组
        async getDataList() {
            this.loading = true;
            var { data: res } = await this.$http.post(
                "videotest/Probject/planModelList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.modelList = res.data.list;
                let id = res.data.list
                    .filter((item) => {
                        return item.status == 1;
                    })
                    .map((item) => {
                        return item.id;
                    })[0];
                this.id = id;
            }
        },

        // 保存
        async submitForm() {
            if (!this.id) {
                this.$message.error("请先选择模板");
                return;
            }
            this.loading = true;
            var { data: res } = await this.$http.post(
                "videotest/Probject/defPlan",
                {
                    id: this.id,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.$message({
                    message: "保存成功！",
                    type: "success",
                });
                this.resetForm();
            }
        },

        // 删除模板
        delModel(item) {
            this.$confirm("是否要删除模板?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "/videotest/Probject/delPlan",
                        {
                            id: item.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.getDataList();
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    }
                })
                .catch(() => {});
        },

        toTask(){
            let routeUrl = this.$router.resolve({
                path: "/launch/Task/task_list",
            });
            window.open(routeUrl.href, "_blank");
        },

        // 关闭重置表单
        resetForm() {
            this.id = null;
            this.modelList = [];
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.table_top {
    font-size: 14px;
    color: #17233d;
    margin-bottom: 20px;
}
.table_top span {
    font-size: 12px;
    color: #b4b7bd;
    margin-left: 8px;
}
.width1 {
}
.width2 {
    width: 100px;
}
.width3 {
    width: 100px;
}
.width4 {
    width: 210px;
}
.width5 {
    width: 265px;
}
.width6 {
    width: 270px;
}
.width7 {
    width: 80px;
}
.table_head {
    height: 40px;
    background: #fafafa;
    line-height: 40px;
}
.table_head .th {
    padding: 0 16px;
    font-size: 14px;
    color: #17233d;
    box-sizing: border-box;
    flex-shrink: 0;
}
.table_content {
    height: 450px;
    overflow-y: auto;
}
.table_item {
    padding: 17px 0;
    position: relative;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    margin-top: 12px;
    cursor: pointer;
}
.active_img {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}
.table_item.active {
    border: 1px solid #4475ff;
    background: rgba(68, 117, 255, 0.05);
}
.table_item.active .active_img {
    display: block;
}
.td {
    padding: 0 16px;
    flex-shrink: 0;
    box-sizing: border-box;
}
.one_line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.two_line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.one_text {
    height: 20px;
    line-height: 20px;
}
.two_text {
    line-height: 20px;
}
.mt_2 {
    margin-top: 2px;
}
.ml_12 {
    margin-left: 12px;
}
.dy_head {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #dcdee2;
}
.sp_head {
    width: 48px;
    height: 48px;
    border-radius: 6px;
}
</style>
